<template>
    <el-dialog v-if="dialogVisible" :append-to-body="true" :close-on-click-modal='false' :title="type==1?'添加规则组':'编辑规则组'" :visible.sync="dialogVisible" @close="resetForm('addRuleGroupForm')" width="760px">
        <div class="over_box">
            <el-form label-position='left' label-width="90px" size="small" :model="addRuleGroupForm" :hide-required-asterisk='true' ref="addRuleGroupForm" :rules="addRuleGroupRules" class="add_form">
                <el-form-item label="规则设置">
                    <div class="rule_box">
                        <span class="rule_titles">设置触发操作</span>
                        <div class="condition_box" v-for="(item,index) in addRuleGroupForm.operation" :key="index">
                            <div class="condition_item flexbox flexcenter">
                                <div class="cod_tag">触发条件</div>
                                <div class="cod_text font_14 color_01 ml_12">{{getText}}消耗大于：</div>
                                <el-form-item label="" :prop="`operation.${index}.cost`" :rules="addRuleGroupRules.group" class="">
                                    <el-input v-model="item.cost" placeholder="请输入" style="width:90px"></el-input>
                                </el-form-item>
                                <div class="cod_text font_14 color_01 ml_12">{{getText}}roi小于：</div>
                                <el-form-item label="" :prop="`operation.${index}.roi`" :rules="addRuleGroupRules.group" class="">
                                    <el-input v-model="item.roi" placeholder="请输入" style="width:90px"></el-input>
                                </el-form-item>
                            </div>
                            <div class="condition_item flexbox flexcenter noBline">
                                <div class="cod_tag">操作设置</div>
                                <div class="cod_text font_14 color_01 ml_12">满足条件，触发关停操作</div>
                            </div>
                            <div class="condition_tips">
                                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M10 17.5C12.071 17.5 13.9461 16.6605 15.3033 15.3033C16.6605 13.9461 17.5 12.071 17.5 10C17.5 7.92895 16.6605 6.05395 15.3033 4.6967C13.9461 3.33947 12.071 2.5 10 2.5C7.92895 2.5 6.05395 3.33947 4.6967 4.6967C3.33947 6.05395 2.5 7.92895 2.5 10C2.5 12.071 3.33947 13.9461 4.6967 15.3033C6.05395 16.6605 7.92895 17.5 10 17.5Z" stroke="#D1D2D6" stroke-width="1.6" stroke-linejoin="round" />
                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M10 5C10.5523 5 11 5.44772 11 6C11 6.55228 10.5523 7 10 7C9.44772 7 9 6.55228 9 6C9 5.44772 9.44772 5 10 5Z" fill="#D1D2D6" />
                                    <path d="M10.1876 13.7501V8.50006H9.81262H9.43762" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M8.875 13.75H11.5" stroke="#D1D2D6" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
                                </svg>
                                <template v-if="viewForm.type==1">
                                    操作说明：如果满足广告账户消耗大于<span class="blue_tips">{{item.cost}}</span>，广告账户roi小于<span class="blue_tips">{{item.roi}}</span>时，则触发广告账户<span class="blue_tips">关停</span>操作
                                </template>
                                <template v-else-if="viewForm.type==2">
                                    操作说明：如果满足广告账户下广告系列消耗大于<span class="blue_tips">{{item.cost}}</span>，广告系列roi小于<span class="blue_tips">{{item.roi}}</span>时，则触发广告系列<span class="blue_tips">关停</span>操作
                                </template>
                                <template v-else-if="viewForm.type==3">
                                    操作说明：如果满足广告账户下广告组消耗大于<span class="blue_tips">{{item.cost}}</span>，广告组roi小于<span class="blue_tips">{{item.roi}}</span>时，则触发广告组<span class="blue_tips">关停</span>操作
                                </template>
                                <template v-else>
                                    请先选择适用范围
                                </template>
                            </div>
                        </div>
                        <!-- <el-link type="primary" :underline="false" @click="addOperation">添加操作</el-link> -->
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm('addRuleGroupForm')" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm('addRuleGroupForm')" class="el-button-width">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
export default {
    props:["viewForm"],
    name: "",
    data() {
        var maxValue = (rule, value, callback) => {
            if (Number(value) > 900000) {
                callback(new Error("数值不能超过900000"));
            }
            callback();
        };
        return {
            loading: false,
            dialogVisible: false,
            type: null,
            addRuleGroupForm: {
                operation: [
                    {
                        cost:"",
                        roi:""
                    },
                ],
            },

            addRuleGroupRules: {
                group: [
                    {
                        required: true,
                        message: "请输入",
                        trigger: ["blur", "change"],
                    },
                    {
                        pattern:
                            /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                        required: true,
                        message: "请输入正确数值",
                        trigger: ["blur", "change"],
                    },
                    { validator: maxValue, trigger: ["blur", "change"] },
                ],
            },
        };
    },
    computed:{
        getText(){
            let text = null
            if(this.viewForm.type==1){
                text = "广告账户"
            }else if(this.viewForm.type==2){
                text = "广告系列"
            }else if(this.viewForm.type==3){
                text = "广告组"
            }
            return text
        }
    },
    created() {},
    methods: {
        // 提交添加
        submitForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.$emit("getRulesData", this.addRuleGroupForm);
                    this.resetForm("addRuleGroupForm");
                } else {
                    return false;
                }
            });
        },

        // 关闭重置表单
        resetForm(formName) {
            this.dialogVisible = false;
            this.addRuleGroupForm = {
                operation: [],
            };
            // this.$refs[formName].resetFields();
        },
    },
    components: {},
};
</script>


<style scoped>
.over_box {
    max-height: 670px;
}
.rule_box {
    max-height: 500px;
    overflow-y: auto;
}
.cod_text {
    line-height: 14px;
}
.rule_titles {
    font-size: 13px;
    color: #17233d;
    font-weight: bold;
}
.blue_tips {
    color: #4475ff;
}
.condition_box {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    background-color: #f8f9fb;
    margin-bottom: 15px;
}
.condition_item {
    padding: 12px 0;
    margin: 0 20px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
    z-index: 2;
}
.condition_item.noBline {
    border-bottom: 0;
}
.condition_tips {
    position: relative;
    font-size: 13px;
    line-height: 16px;
    color: #616c85;
    padding: 13px 20px 13px 45px;
    background-color: #fff;
}
.condition_tips svg {
    position: absolute;
    left: 20px;
    top: 10px;
}
</style>
